<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header/>
      <List />
      <Footer/>
    </div>
  </div>
</template>


<script>
  import Header from './components/Header.vue'
  import List from './components/List.vue'
  import Footer from './components/Footer.vue'
  export default {
    name: 'App',


    mounted () {
      // 模拟异步加载得到todos数据
      this.$store.dispatch('loadTodos')
    },

    components: {
      Header,
      List,
      Footer,
    }
  }
</script>


<style scoped>
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>